<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页换肤</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        body{
            position: relative;
            background:url('../../img/学校作业图1.png') no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        .wrap{
            position: absolute;
            height: 30px;
            width: 120px;
            top: 30px;
            right: 400px;
            /* background-color: aqua; */
        }
        .box{
            position: absolute;
            height: 500px;
            width: 800px;
            left: 450px;
            top: 80px;
            border: 1px solid #ccc;
        }
        .box h1{
            margin-left: 260px;
            margin-top: 50px;
        }
        .box p{
            text-indent: 30px;
            margin-top: 20px;
            font-size: 20px;
            line-height: 40px;
        }
        .wrap div:nth-child(1){
            position: relative;
            height: 30px;
            width: 40px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: black;
        }
        .wrap div:nth-child(2){
            position: absolute;
            height: 30px;
            width: 40px;
            left: 40px;
            top: 0px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: red;
        }
        .wrap div:nth-child(3){
            position: absolute;
            height: 30px;
            width: 40px;
            left: 80px;
            top: 0px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: blue;
        }
        .wrap div:nth-child(1):hover{
            border: 2px solid #ccc;
            border-radius: 10px;
        }
        .wrap div:nth-child(2):hover{
            border: 2px solid #ccc;
            border-radius: 10px;
        }
        .wrap div:nth-child(3):hover{
            border: 2px solid #ccc;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
    </div>
    <div class="box" id="box">
        <h1>WEB 前端开发</h1>
        <p>Web前端开发是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
    </div>
    <script>
        let bodyColor1 = document.getElementById("one")
            bodyColor2 = document.getElementById("two")
            bodyColor3 = document.getElementById("three")
            colorArr = ["black","red","blue","white","grey"]
            boxColor = document.getElementById("box")
        
        bodyColor1.onclick = function(){
            boxColor.style.backgroundColor = colorArr[0];
            boxColor.style.color = colorArr[3]
        }
        bodyColor2.onclick = function(){
            boxColor.style.backgroundColor = colorArr[4];
            boxColor.style.color = colorArr[1]
        }
        bodyColor3.onclick = function(){
            boxColor.style.backgroundColor = colorArr[3];
            boxColor.style.color = colorArr[2]
        }
    </script>
</body>
</html>